<template>
    <div class="tophead">
        <div class="th-left" @click="backAction">
            <a herf="javascript:;"><i class="icon iconfont icon-back"></i></a>
        </div>
        <div class="th-center ellipsis">{{title}}</div>
        <div class="th-right">
            <slot name="sl-right"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props:["title","backurl"],
    methods:{
        backAction(){
            if(this.backurl){
                this.$router.push(this.backurl);
            }else{
                this.$router.go(-1);
            }
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .tophead
        display: flex
        justify-content:  space-between
        height: 2.6rem
        line-height: 2.6rem
        color: #fff
        background: #4fc08d
        font-size: 1.2rem
        z-index 1
        .th-left
            padding-left: 0.8rem
        .th-center
            text-align: center
        .th-right
            padding-right: 0.8rem
        .icon
            font-size: 2rem
        
    
</style>